<template>
  <div class="picture-show">
    <transition-group :name="showType?'slide-left':'slide-right'"
                      :enter-active-class="'transition-active'"
                      :leave-active-class="'transition-active'">
      <!--<div v-show="showIndex==='0'" :key="0" class="item" v-click="()=>{goList('getActivityList')}">
        <img :src="getImgUrl(activity.url)"/>
        <a>{{activity.title}}</a>
      </div>-->
      <div v-for="(item,i) in list" class="item" v-show="showIndex===i">
        <img :src="item.url" width="932" height="547">
      </div>
    </transition-group>
  </div>
</template>

<script>
import Timer from '@/modules/corejs/time/timer'
export default {
  name: 'picture-show',
  props: ['list'],
  data () {
    return {
      showIndex: 0,
      showType: 0
    }
  },
  created () {
    this.timer = new Timer({
      callBack: this.timeExcu,
      time: 6000
    })
    if (this.itemNum > 1) {
      this.timer.start()
    }
  },
  computed: {
    itemNum () {
      return this.list.length
    }
  },
  methods: {
    timeExcu () {
      let { showIndex } = this
      if (++showIndex >= this.itemNum) {
        showIndex = 0
      }
      this.showIndex = showIndex
    }
  },
  watch: {
    itemNum (num) {
      if (num > 1) {
        this.showIndex = 0
        this.timer.start()
      } else {
        this.timer.stop()
      }
    }
  },
  destroyed () {
    this.timer.stop()
  }
}
</script>

<style scoped>
  .picture-show{
    /*width: 932px;
    height: 547px;
    overflow: hidden;
    position: absolute;
    left: 66px;
    top: 101px;*/
  }

/*  .picture-show ul {
    transition: transform .5s ease;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
  }*/

  .picture-show .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

</style>
